<template>
  <div class="contain">
    <div class="searchContainer">
      <input type="text" v-model="keyname" placeholder="暂时只能搜索作者。。。" placeholder-class="place" />
      <button class="bu" @click="goSearch">搜索</button>
    </div>
    <div class="alineW"></div>
    <ul class="bar">
      <li :class="[{active:standard == 1}]" @click="tab(1)">词作</li>
      <li :class="[{active:standard == 2}]" @click="tab(2)">诗作</li>
    </ul>
    <div class="alineW"></div>
    <div class="tips">
      <div class="au">作者</div>
      <div class="num">作品数量</div>
    </div>
    <div class="intro">
      <div class="introduceL">点击作者名字查看作者生平</div>
      <div class="introduceR">点击作品数量阅读诗词作品</div>
    </div>
    <div v-for="(item,index) in dataList" :key="index" class="author">
      <div class="poems">
        <span class="author" @click="toAuthor(item.id)">{{item.authorname}}</span>
        <span class="poemnum" @click="toPoems(item)">{{item.poemsnum}}首</span>
      </div>
      <div class="alineInDiv"></div>
    </div>
    <!-- 下面是跳转到顶部，因为遮挡banner，暂时取消 -->
    <div class="goTop" @click="goTop" v-if="btnFlag">
      <img src="/static/images/top.png" alt />
    </div>
    <lastPage :last="{length: dataList.length, lastPage: lastPage}"></lastPage>
  </div>
</template>

<script>
import { navto } from "@/utils/util";
import { toast } from "@/utils/index";
import { selectCountByAuthor, selectPoetryCountByAuthor } from "@/api/api";
import lastPage from "@/components/lastPage";
export default {
  data() {
    return {
      btnFlag: false, //返回顶部的标识
      standard: 1,
      keyname: "", //搜索关键词
      totalPage: 1, //总计页面
      lastPage: false, //是否显示加载中
      page: 1, //当前第几页
      limit: 20, //一页展示多少条数据
      dataList: [] //数据存储地方
    };
  },
  onLoad() {
    this.reset();
    this.getDataList();
  },
  //触及底部
  onReachBottom(e) {
    let that = this;
    that.loadMore();
  },
  // 获取滚动条当前位置
  onPageScroll: function(e) {
    if (e.scrollTop > 100) {
      this.btnFlag = true;
    } else {
      this.btnFlag = false;
    }
  },
  components: {
    lastPage
  },
  methods: {
    //回到顶部
    goTop() {
      let that = this;
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        });
      } else {
        wx.showModal({
          title: "提示",
          content:
            "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
        });
      }
    },
    reset() {
      this.totalPage = 1; //总计页面
      this.lastPage = false; //是否显示加载中
      this.page = 1;
      this.dataList = [];
    },
    tab(index) {
      this.reset();
      this.standard = index;
      this.getDataList();
    },
    /**
     * 进行搜索
     */
    goSearch() {
      if (this.keyname) {
        this.dataList = [];
        this.page = 1;
        this.getDataList();
      } else {
        toast("请输入要搜索的内容！");
      }
    },
    // 上拉加载更多
    loadMore(e) {
      if (this.totalPage - this.page <= 0) {
        return;
      } else {
        this.page++;
        this.getDataList();
      }
    },
    /**
     * 跳转作者生平
     */
    toAuthor(id) {
      if (id) {
        let st = this.standard;
        navto("/pages/author/main", { author: id, st: st });
      } else {
        toast("sorry,Its error!");
      }
    },
    /**
     * 跳转作者诗作
     */
    toPoems(item) {
      if (item) {
        let st = this.standard;
        console.log("e", item);
        navto("/pages/poems/main", {
          id: item.id,
          st: st,
          authorname: item.authorname
        });
      } else {
        toast("sorry,Its error!");
      }
    },
    /**
     * 实际获取数据
     */
    getDataList() {
      let data = {
        keyname: this.keyname,
        page: this.page,
        limit: this.limit
      };
      if (this.standard == 1) {
        selectCountByAuthor(data).then(res => {
          this.detailData(res);
        });
      } else if (this.standard == 2) {
        selectPoetryCountByAuthor(data).then(res => {
          this.detailData(res);
        });
      }
    },
    /**
     * 处理获得的数据
     */
    detailData(res) {
      this.dataList = this.dataList.concat(res.data.list);
      this.page = res.data.currPage;
      this.totalPage = res.data.totalPage;
      if (this.totalPage - this.page <= 0) {
        //最后一页
        this.lastPage = true;
      } else {
        this.lastPage = false;
      }
    }
  }
};
</script>

<style lang='less' scope>
.contain {
  width: 90%;
  margin: 0rpx auto;
  margin-top: 25rpx;
  box-sizing: border-box;
  background-color: #fff;
  .searchContainer {
    margin: 14rpx auto;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    .bu {
      margin-left: 32rpx;
      flex: 1;
      color: #fff;
      border-radius: 40rpx;
      font-size: 26rpx;
      background-color: rgb(168, 164, 164);
      right: 0rpx;
    }
    input {
      flex: 4;
      border: 1px solid rgb(200, 195, 195);
      height: 64rpx;
      border-radius: 90rpx;
      margin: 0 auto;
      background-position: 26rpx center;
      background-repeat: no-repeat;
      background-size: 26rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      padding-left: 60rpx;
    }
  }
  .bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 84rpx;
    padding-left: 98rpx;
    background: #fff;
    padding-bottom: 0;
    li {
      font-size: 28rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: rgba(153, 153, 153, 1);
      padding-bottom: 26rpx;
      &.active {
        color: rgb(176, 179, 182);
        border-bottom: 4rpx solid rgb(179, 182, 184);
      }
    }
  }
  .goTop {
    width: 144rpx;
    height: 144rpx;
    position: fixed;
    right: 50rpx;
    bottom: 20rpx;
    z-index: 10;
    img {
      width: 50%;
      height: 50%;
    }
  }
  .tips {
    display: flex;
    font-size: 30rpx;
    .au {
      flex: 1;
    }
    .num {
      flex: 1;
      text-align: right;
    }
  }
  .intro {
    margin: 8rpx auto;
    display: flex;
    font-size: 20rpx;

    flex-direction: row;
    color: rgb(200, 195, 195);
    .introduceR {
      flex: 1;
      text-align: right;
    }
    .introduceL {
      flex: 1;
      text-align: left;
    }
  }

  .author {
    font-size: 28rpx;
    margin: 22rpx auto;
    .poems {
      display: flex;
      .author {
        flex: 1;
      }
      .poemnum {
        flex: 1;
        text-align: right;
        margin: auto 0;
      }
    }
    .alineInDiv {
      background-color: #e6e3e3;
      height: 2rpx;
      width: 100%;
    }
  }
}
</style>
